<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
</head>
<body>
<div id="app">
    <el-input v-model="input" placeholder="请输入内容"></el-input>
    <template>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="initRanges" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="one in ranges" name="{{one.name}}">{{one.text}}</el-checkbox>
        </el-checkbox-group>
    </template>
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
	new Vue({
		el: '#app',
		data: function () {
			return {
				input: "",
				checkAll: false,
				initRanges: [{
					text: "文章",
					name: "artical"
				}],
				ranges: [{
					text: "文章",
					name: "artical"
				}, {
					text: "作者",
					name: "author"
				}, {
					text: "内容",
					name: "content"
				}]
			}
		},
		methods: {
			handleCheckAllChange(event) {
				debugger;
				this.initRanges = event.target.checked ? this.ranges : [];
				this.isIndeterminate = false;
			},
			handleCheckedCitiesChange(value) {
				debugger;
				let checkedCount = value.length;
				this.checkAll = checkedCount === this.ranges.length;
				this.isIndeterminate = checkedCount > 0 && checkedCount < this.ranges.length;
			}
		}
	})
</script>
</html>